<template>
  <div class="">
     <!-- <div>{{count}}</div> -->
     <div>{{num}}</div>
     <button @click="num++">++</button>
  </div>
</template>

<script setup>
  
  import { watchEffect,ref,reactive, toRefs,watch,getCurrentInstance} from 'vue';

  const { proxy } = getCurrentInstance();

  proxy.$axios.get('https://api.it120.cc/small4/cms/news/list').then(res => {
      console.log(res);
  })




// watchEffect vue3 新引入的概念
//   const count = ref(0);
//   const data = reactive({num:0});
//   const { num } = toRefs(data);
// //   const i = 10;
// //   setTimeout(() => {
// //       i++
// //   }, 1000);
// // watchEffect  只能监听 ref, reactive 声明的值
//     watchEffect(()=>{ // 一开始就会自动触发监听
//     //    console.log(count.value) // 这里的值会被打印两次，0，1
//     //    console.log(data.num)
//     //   console.log('我被执行了');
//     //   console.log(i);
//     })



// watch 监听

//  const count = ref(0);
//  // 第一个参数是你要监听的数据，第二个参数是监听的回调函数
//  // 第三参数 是监听的选项
//  watch(count, (newVal,oldVal)=>{
//     console.log(newVal) // 1
//     console.log(oldVal) // 0
//  },{
//    immediate: true
//  })

//  const data = reactive({
//     num: 0
//  });
//  const { num } = toRefs(data);
// // 如果使用 watch reactive 声明的变量，第一个参数应该是一个函数
// watch(()=>data.num, (newVal,oldVal)=>{
//     console.log(newVal) // 1
//     console.log(oldVal) // 0
// })



  const num = ref(0);
//   const number = ref(20);
  const data = reactive({
    number: 20
  })
  watch([num,()=>data.number],([newNum,newNumber],[oldNum,oldNumber])=>{
      console.log(newNum,oldNum);// 打印 1 0
      console.log(newNumber,oldNumber); // 打印 21 20
    })
    
    setTimeout(()=>{
      num.value++
      data.number++
    },1000)

</script>
<style lang="scss" scoped>
</style>